<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-07-10 09:50:15
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-09-03 10:54:46
-->
<div style="width: 100%;height: 100%;padding: 10px;" class="driver">
    <div style="height: 100%; width: 100%; background-color: #fff;border: 0.5px solid #888888">
        <div style="height: 50%; background-color: #fff; width: 100%; display: flex;">
            <div style="width: 50%;height: 100%;">
                <div style="height: 100%; width: 100%;">
                    <div style="padding: 10px; font-size: 20px;width: 100%; height: 10%;">生产任务信息</div>
                    <div style="height: 90%; width: 100%;display: flex;">
                        <div style="width: 10%; height: 100%; position: relative;">
                            <div [hidden]="messionIndex == 0" (click)="pageDown(1)" class="left-arrow" style="position: absolute;top: 41%;left: 15%;">
                            </div>
                        </div>
                        <div style="width: 80%; height: 100%; display: flex;">
                            <div style="width:48%; height: 98%; border: 1px solid #888888;margin: 0px 50px 10px 0px;">
                                <div style="width: 100%;height: 10%;background-color:#AAAAAA; font-size: 15px; text-align: center;
                                padding: 5px;">{{rescueMsg1.title}}</div>
                                <div style="width: 100%;height: 90%;">
                                    关联规程数量：{{rescueMsg1.sum}}本
                                    <p-chart type="doughnut" [data]="rescueData1" [options]='options' style="width: 200px;"></p-chart>
                                </div>
                            </div>
                            <div style="width:48%; height: 98%;border: 1px solid #888888;margin: 0px 10px 10px 0px;">
                                <div style="width: 100%;height: 10%;background-color:#AAAAAA;font-size: 15px; text-align: center;
                                padding: 5px;">{{rescueMsg2.title}}</div>
                                <div *ngIf="rescueMsg2.title != null" style="width: 100%;height: 90%;">
                                    关联规程数量：{{rescueMsg2.sum}}本
                                    <p-chart type="doughnut" [data]="rescueData2" style="width: 200px;"></p-chart>
                                </div>
                                <div *ngIf="rescueMsg2.title == null" style="width: 100%;height: 90%;">
                                    <p-chart type="doughnut" [data]="rescueData2" style="width: 200px;"></p-chart>
                                </div>
                            </div>
                        </div>
                        <div style="width: 10%; height: 100%; position: relative;">
                            <div [hidden]="messionFlag" (click)="pageUp(1)" class="right-arrow" style="position: absolute;top: 41%;left: 55%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 50%;height: 100%; border: 0.5px solid #888888;border-top: none;
            border-right: none;
            border-bottom: none;" >
                <div style="padding: 10px; font-size: 20px; height: 10%;width: 100%;">质量采集信息</div>
                <div style="padding: 5px; font-size: 15px; height: 10%;width: 100%; background-color: #AAAAAA; display: flex;">
                    <div style="width: 50%; height: 100%;text-align: center;">质量采集项信息</div>
                    <div style="width: 50%; height: 100%; text-align: center;"> 多媒体采集项信息</div>
                </div>
                <div style="height: 80%; width: 100%;display: flex; background-color: #DDDDDD;">
                    <div style="width: 49%; height: 98%; background-color: #fff;margin: 10px;margin: 5px;">
                        <p-chart type="bar" [data]="barData1" height="325"></p-chart>
                    </div>
                    <div style="width: 49%; height: 98%; background-color: #fff;margin: 10px; margin: 5px 5px 5px 0px;">
                        <p-chart type="bar" [data]="barData2" height="325"></p-chart>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 50%;background-color: #fff;width: 100%; border: 0.5px solid #888888;border-right: none;
        border-left: none;
        border-bottom: none">
            <div style="padding: 10px; font-size: 20px; height: 10%;width: 100%;">PAD任务信息</div>
            <div style="height: 90%; width: 100%;display: flex;">
                <div style="width: 2%; height: 100%;  position: relative;">
                    <div [hidden]="padIndex == 0" (click)="pageDown(2)" class="left-arrow" style="position: absolute;top: 41%;left: 25%;"></div>
                </div>
                <div style="width: 96%; height: 100%; display: flex;justify-content:space-evenly;">
                    <div style="height: 100%; width: 20%;padding: 10px;" *ngFor="let item of padMsg">
                        <div class="rounded-rectangle">
                            <div class="pad-header">{{item.padName}}</div>
                            <div class="pad-smalHeader">下载规程信息：{{item.downloadProcessQuantity}}本</div>
                            <div class="pad-body">
                                <div class="item" *ngFor="let book of item.techniqueListDto">
                                    <div style="width: 40%;height: 100%;">
                                        <img src="../../../assets/common/images/book.png" alt="" style="width: 100px;">
                                    </div>
                                    <div style="width: 60%;height: 100%;">
                                        <div style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{book.moduleName}}</div>
                                        <div style="display: flex;"><div class="item-circle"></div><div style="width:60%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{book.model}}</div></div>
                                        <div style="display: flex;"><div class="item-circle"></div><div style="width:60%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{book.lotNo}}</div></div>
                                        <div style="display: flex;"><div class="item-circle"></div><div style="width:60%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{book.techniqueNumber}}</div></div>
                                        <div style="display: flex;"><div class="item-circle"></div>{{book.exportDate | momentFormat:'YYYY-MM-DD HH:mm:ss'}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="pad-foot">
                                <div class="circle"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width: 2%; height: 100%;  position: relative;">
                    <div [hidden]="padFlag" (click)="pageUp(2)" class="right-arrow" style="position: absolute;top: 41%;"></div>
                </div>
            </div>
        </div>
    </div>

</div>